<template>
    <div style="padding: 24px 36px;">
        <el-tabs v-model="activeName">
            <el-tab-pane label="事务提醒" name="first"></el-tab-pane>
        </el-tabs>
        <div class="affair_content" v-for="item in alarm">
            <div style="display:flex">
                <i class="el-icon-s-order"></i>
                <div class="affair_content_app">
                    <div class="affair_content_top">{{item.name?item.name:'暂无名称'}}
                         <el-tag style="margin-left:10px" :type="item.status=='00'?'':item.status=='01'?'success':'danger'">{{item.status=='00'?'待执行':item.status=='01'?"已执行":'已关闭'}}</el-tag>
                    </div>
                    <div class="affair_content_bottom">{{item.content}}</div>

                </div>

            </div>
            <div>
                  <el-button v-if="item.status=='00'" type="primary" size="small" @click="updateclick(item)">我知道了</el-button>
            </div>

        </div>
        <div>
           <pagination v-show="total>0" :total="total" :current.sync="current" :size.sync="size" @pagination="alarmlistclick"/>
        </div>
        <el-empty description="暂无数据" v-if="alarm.length<1"></el-empty>
        <!-- <Navbar ref="navbar" v-show="false"></Navbar> -->
    </div>
</template>
<script>
import pagination from "@/components/Pagination";
import { alarmlist,alarmChange} from "@/api/alarmSet";
import Navbar from '@/layout/components/Navbar'
export default {
    names: "reminder",
    components:{
        pagination,Navbar
    },
    data() {
        return {
            activeName: "first",
            current: 1,
            size: 10,
            alarm: [],
            total:0
        };
    },
    created() {
        this.alarmlistclick();
    },
    methods: {
        updateclick(data){
            let params=new URLSearchParams()
            params.append('alarmId',data.alarmId)
            params.append('status','01')
             alarmChange(params).then(res=>{
                 this.$message("成功")
                  this.alarmlistclick();
                //   this.$refs.navbar.getWaitNumclick()
                this.$EventBus.$emit('eventNavbar','')

             })
          

         },
        alarmlistclick() {
            let params = new URLSearchParams();
            params.append("current", this.current);
            params.append("size", this.size);
            alarmlist(params).then((res) => {
                this.alarm = res.data.records;
                this.total = res.data.total;
            });
        },
    },
};
</script>
 <style scoped>
.affair_content {
    padding: 10px 8px;
    border-bottom: 1px solid #dadee3;
    display: flex;
    justify-content: space-between;
}
.affair_content_app{
    margin-left: 10px;
}
.affair_content_top{
    font-size: 14px;
    color:rgb(46, 64, 94);
    margin-right: 10px;
}
.affair_content_bottom {
    color: rgb(46, 64, 94);
    font-size: 14px;
    line-height: 20px;
    color-scheme: light;
    box-sizing: border-box;
    margin-top: 10px;
}
</style>
